H5游戏引擎

2016-02-25

H5, 引擎, 游戏

白鹭引擎

Texture Merger 可以实现序列帧动画、图片字体、图片整合

序列帧动画注意事项

a 动画名和导出名应该一致或固定规律，方便程序导入
b 编辑动画的中心点，设置y为0，x为站立动作的左边缘

Wing 里修改调试port端口号

默认是5758，通过修改文件.wing/launch.json文件修改
```
"port":5758
```

TiledMap 里面的bug

必须有这句，里面的TMXObject才会有值！！！！！！ element.draw();

let mapGroups: tiled.TMXObjectGroup[] = tmxTileMap.getObjects();
for (let element of mapGroups) {
    if (element.name == "obj") {
        element.draw();// ！！！！！！必须有这句，里面的TMXObject才会有值，这他妈是个bug！！！！！！！！
        for (let i = 0; i < element.getObjectCount(); i++) {
            let obj: tiled.TMXObject = element.getObjectByIndex(i);

addEventListener一定要和removeEventListener配对，否则后果很严重！！！

addEventListener一定要和removeEventListener配对，否则后果很严重！！！

=>的妙用

回调方法中this一般不能用，但使用=>这个可以很方便使用this

原来：

let self = this;
// 加载地图数据
this.stageMap.loadMap("resource/assets/map/stage03.tmx", function (tmxTileMap: tiled.TMXTilemap): void {
        self.bm.addChild(self.stageMap);
   });

现在：

// 加载地图数据
this.stageMap.loadMap("resource/assets/map/stage03.tmx", (tmxTileMap: tiled.TMXTilemap) => {
        this.bm.addChild(this.stageMap);
    });

音乐节拍的应用

/** 跳到下一个音阶所需帧数 */
public static STEP_NUM: number = 16;
// x方向基本速度
public static VX: number = 8;
/** 帧间隔时间 ms 
 * 128bpm的音乐，对应24.4ms
 * 126bpm的音乐，对应24.8ms
 * 125bpm的音乐，对应25ms
 * 71bpm的音乐，对应21.6ms
 * 每1bpm，对应0.2ms
 * 帧间隔 = 25 - 0.2*(bpm - 125)
 * 使用《格式工厂》转成mp3，44100赫兹，96比特率
 * 再用《audioretoucher3》查看mp3的bpm值
*/
public static FRAME_STEP: number = 24.8;

寻路算法 PathFinding

基本用法

    this.grid = new PF.Grid(this.map_h, this.map_w, this.map);
    let option: PF.Option = new PF.Option();
    option.allowDiagonal = true;
    option.dontCrossCorners = true;
    this.finder = new PF.AStarFinder(option);
    let path = this.finder.findPath(this.start_y, this.start_x, this.goal_y, this.goal_x, this.grid);

H5游戏

HTML5游戏开发经验及开发工具分享

自动保存用户的记录
使用profiler

通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start profiling”。在你觉得性能需要提升的地方停留30秒，profiler将收集相关数据，然后选择“stop profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常，你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

不要过分相信自己的直觉——有些代码可能看起来效率很低，但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序，对于修改过的代码，需要反复进行测试确保你的修改确实能够提升程序的性能。
fnt字体制作工具

http://www.angelcode.com/products/bmfont/

技术前端

白鹭引擎

Texture Merger 可以实现序列帧动画、图片字体、图片整合

寻路算法 PathFinding

H5游戏

HTML5游戏开发经验及开发工具分享